function Mustache() {
  const str = '你好'
  const num = 123
  const arr = [2, 3, 4]
  const bool = true
  const htmlTag = <span>标签</span>
  const htmlTag2 = <span style={{fontSize: '18px', fontWeight: 600}}>标签</span>
  const htmlTag3 = `<span style="font-size: 18px;color: #f40">标签内容</span>`
  const circle = 3.1415926535

  const handleClick1 = () => {
    console.log('111:');
  }
  const handleClick2 = (num: number) => {
    console.log('222:', num);
  }
  const handleClick3 = (num: number, e) => {
    console.log('333:', num, e);
  }
  const handleClick4 = <T, >(num: T) => {
    console.log('444:', num);
  }

  const containerId = 'ks-container'
  const clsRed = 'color-red'
  const clsRedAndFw600 = 'color-red font-weight-600'
  const sty = {fontSize: '18px', fontWeight: 600, color: 'red'};

  const userList = [
    {name: '张三', age: 18, id: '1', sex: '男'},
    {name: '李四', age: 19, id: '2', sex: 'nv'},
    {name: '王五', age: 20, id: '3', sex: '男'},
  ]
  return (
    <>
      <div>
        <h2>基本类型:</h2>
        <div>字符类型：{'你好'}</div>
        <div>字符类型：{str}</div>
        <div>数值类型：{123}</div>
        <div>数值类型：{num}</div>
        <div>简单数组类型：{[2, 3, 4]}</div>
        <div>简单数组类型：{arr}</div>
        <div>三元表达式：{(1 < 2) ? 'yes' : 'none'}</div>
        <div>三元表达式：{bool ? 'yes' : 'none'}</div>
        <div>元素：{htmlTag}</div>
        <div>元素：{htmlTag2}</div>
        <div>元素：{htmlTag3}</div>
        <div>方法：{circle.toFixed(2)}</div>

      </div>
      <hr/>

      <div>
        <h2>事件:</h2>
        <div>方法： <button onClick={handleClick1}>没有参数</button></div>
        <div>方法： <button onClick={() => handleClick2(3)}>有参数</button></div>
        <div>方法： <button onClick={(e) => handleClick3(3, e)}>有参数且有event</button></div>
        <div>方法： <button onClick={() => handleClick4(3)}>泛型函数</button></div>

      </div>
      <hr/>

      <div>
        <h2>id、样式：</h2>
        <div>className：本质是string；style：本质是一个对象；</div>
        <div>id：<span id={containerId}>span标签</span></div>
        <div>class：<span className={clsRed}>span标签</span></div>
        <div>class：<span className={clsRedAndFw600}>span标签</span></div>
        <div>style：<span style={sty}>span标签</span></div>
        <div>style：<span style={{fontSize: '18px', fontWeight: 600}}>span标签</span></div>
      </div>

      <hr/>
      <div>
        <div>
          <h2>代码：</h2>
          <div dangerouslySetInnerHTML={{__html: htmlTag3}}></div>
        </div>
      </div>
      <hr/>

      <div>
        <h2>遍历：map函数，返回jsx元素。</h2>
        <div>
          {
            userList.map(v => {
              return (
                <div id={v.id}>{v.name} -- {v.age}</div>
              )
            })
          }
        </div>
      </div>
    </>
  )
}

export default Mustache
